<template>
  <div class="flex h-full w-full space-x-2 items-center text-base">
    <el-icon
      class="cursor-pointer"
      v-if="isFold"
      :size="30"
      @click="changeFold"
    >
      <expand />
    </el-icon>

    <el-icon
      class="cursor-pointer"
      v-if="!isFold"
      :size="30"
      @click="changeFold"
    >
      <fold />
    </el-icon>

    <!--面包屑,待完善-->
    <dd-breadcrumb :breadcrumbs="breadcrumbs" />

    <div class="flex-1 h-full"></div>
    <el-icon class="cursor-pointer" :size="20" @click="handleBellClick">
      <bell />
    </el-icon>
    <el-icon class="cursor-pointer" :size="20" @click="handleChatDotRoundClick">
      <chat-dot-round />
    </el-icon>
    <el-icon class="cursor-pointer" :size="20" @click="handlePostcardClick">
      <postcard />
    </el-icon>

    <!--头像,用户详情-->
    <user-info />
  </div>
</template>

<script setup lang="ts">
import { ref, defineEmits, computed } from 'vue'
import UserInfo from './user-info.vue'
import DdBreadcrumb from '@/base-ui/breadcrumb'
import { useRoute } from 'vue-router'
import { pathToBreadcrumbs } from '@/utils/map-menus'
import store from '@/store'

const emit = defineEmits(['changeFoldStatus'])
const route = useRoute()
//菜单栏折叠
const isFold = ref(false)
const changeFold = () => {
  isFold.value = !isFold.value
  emit('changeFoldStatus', isFold.value)
}
//面包屑
const routePath = computed(() => route.path)
const userMenus = computed(() => store.state.login.userMenus)
const breadcrumbs = computed(() =>
  pathToBreadcrumbs(routePath.value, userMenus.value)
)

const handleBellClick = () => {
  console.log('bell is clicked.')
}
const handleChatDotRoundClick = () => {
  console.log('chatDotRound is clicked.')
}
const handlePostcardClick = () => {
  console.log('postcard is clicked.')
}
</script>

<style scoped></style>
